<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {http} from "@/api";
import useTable from "@/utils/useTable";
import { getStatus } from "@/utils/common";

const apiKey = 'ProductOrder'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const formData = ref({
  user: {},
  address: {}
})

const getOrderDetail = () => {
  http[apiKey].read(id).then(res => {
    formData.value = {
      ...res.data,
      user: res.data.user || {},
      address: res.data.address || {}
    }
    address.value = res.data.address || {}
  })
}
if (id) {
  // 获取详情
  getOrderDetail()
}
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openEdit,
  openDelete
} = useTable({
  requestFn: http.ProductOrderDetail,
  routerPre: 'ProductOrderDetail',
  params: {
    name: '',
    order_id: id
  }
})
const saveProduct = (row) => {
  ElMessageBox.confirm(
      '是否确认更改订单信息？',
      '提示',
      {
        confirmButtonText: '确认更改',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {
        http.ProductOrderDetail.update({
          id: row.id,
          count: row.count
        }).then(res => {
          ElMessage({
            type: 'success',
            message: '更改成功',
          })
          search()
          getOrderDetail()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '更改取消',
        })
      })
}
// 发货
const dialogVisible = ref(false)
const address = ref({})
const send = () => {
  dialogVisible.value = true
}

const sendConfirm = () => {
  ElMessageBox.confirm(
      '是否确认完成？',
      '提示',
      {
        confirmButtonText: '确认完成',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {
        http.ProductOrder.update({
          id: id,
          status: 5
        }).then(res => {
          ElMessage({
            type: 'success',
            message: '确认成功',
          })
          search()
          getOrderDetail()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '确认取消',
        })
      })
}
</script>

<template>
  <PageMain title="订单详情" is-back>
    <div class="form-content f-c">
      <el-card shadow="never" class="f-s">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
            <span>{{ formData.order_status === 3 ? '退款失败-' + getStatus(formData): getStatus(formData)}}</span>
          </div>
        </template>
        <el-descriptions
            :column="2"
            border
        >
          <template #extra>
            <div v-if="formData.order_status === 0">
              <el-button v-if="formData.address_id && formData.status === 2" type="primary" @click="sendConfirm">确认</el-button>
            </div>
          </template>
          <el-descriptions-item>
            <template #label>
              订单号：
            </template>
            {{ formData.order_no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              订单状态：
            </template>
            {{ formData.statusName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              用户姓名：
            </template>
            {{ formData.user.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              用户电话：
            </template>
            {{ formData.user.phone }}
          </el-descriptions-item>
          <el-descriptions-item >
            <template #label>
              退款理由：
            </template>
            {{ formData.back_reason }}
          </el-descriptions-item>
        </el-descriptions>

      </el-card>
      <div style="height: 20px"></div>

      <el-card shadow="never" class="f-s" v-if="formData.address_id">
        <template #header>
          <div class="card-header">
            <span>婚礼地址</span>
          </div>
        </template>
        <el-descriptions   :column="2"
                           border>
          <el-descriptions-item label="姓名">
            {{ address.username }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{ address.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="地址">
            {{ address.address }}
          </el-descriptions-item>
          <el-descriptions-item label="门牌号">
            {{ address.code }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <div style="height: 20px"></div>
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>套餐明细</span>
          </div>
        </template>
        <el-table :data="dataSource">
          <el-table-column label="套餐名称" prop="good.name">
          </el-table-column>
          <el-table-column label="数量" prop="count">
            <template #default="scope">
              <el-input type="number" placeholder="" v-model="scope.row.count"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="剩余库存" prop="good.store_count">
          </el-table-column>
          <el-table-column label="创建时间" prop="create_time">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="text" @click="saveProduct(scope.row)">保存</el-button>
              <el-button type="text" @click="openDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
      />
    </div>
  </PageMain>
</template>
<style lang="scss">
.form-box2 {
  display: flex;
  .gap {
    width: 32px;
  }
  .avatar-uploader {
    width: 100%;
  }
  .avatar-uploader .avatar {
    width: 100%;
    height: 120px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .el-upload {
    width: 100%;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 120px;
    text-align: center;
  }
}
</style>
